<template>
  <view class="logistics">
    <view class="navs">
      <navigator
        url="/packageA/order/index"
        open-type="navigate"
        hover-class="none"
      >
        <u-icon name="arrow-leftward"></u-icon>
      </navigator>
      <view class="sear"> 我的物流</view>
    </view>
    <view class="tabOneitem" v-for="(item, i) in farmlist" :key="i">
      <view class="tabOneitem_left">
        <img :src="item.url" alt="" />
      </view>
      <view class="tabOneitem_right">
        <view class="title">
          <text class="t1"> {{ item.title }}</text>
          <text class="t2"> {{ item.zt }}</text>
        </view>
        <view class="distance">
          <text class="distance1">下单: {{ item.time }}</text>
          <text class="distance1">数量: {{ item.num }}</text>
          <text class="distance1">实付: ¥ {{ item.price }}</text>
        </view>
      </view>
    </view>
    <view class="orders">
      <view class="my-od">
        <text class="dd">我的订单号</text>
        <text>YT1234567890123 </text>
      </view>
      <view class="kd">
        <view>圆通快递</view>
        <view>YT1234567890123</view>
        <view class="fz">
          <view @tap="copyText">复制</view>
          <view class="zzz"> | 打电话</view>
        </view>
      </view>
      <view class="my-xr">
        <view class="">新农人农庄</view>
        <u-steps
          current="1"
          direction="column"
          activeIcon="checkmark"
          inactiveIcon="arrow-right"
          activeColor="#8d8683"
        >
          <u-steps-item title="已打包"> </u-steps-item>
          <u-steps-item title="已发货"> </u-steps-item>
        </u-steps>
        <view class="cf">2024/3/30 从武汉市黄陂区*****出发</view>

        <view class="blak">
          <view class="">下一站 东西湖转运中心</view>
          <view class="rg">
            <u-icon name="arrow-downward" color="#000"></u-icon>
          </view>
          <view class="">送至 武汉大学信息学部</view>
        </view>
        <view class="yj">预计 2024/4/1 到达</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "logistics",
  components: {},
  data: () => ({
    farmlist: [
      {
        id: 1,
        url: "https://img95.699pic.com/xsj/0o/bs/q1.jpg%21/fh/300",
        title: "新农人农庄 草莓 5kg",
        num: "1",
        price: "230.00",
        time: "2024年4月15日 10：45",
        ranking: "去使用",
        tag: "物流进度",
        tag1: "退款进度",
        tag2: "再来一单",
        tag3: "去评价",
        zt: "待收货",
      },
    ],
    content: "888",
  }),
  computed: {},
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  onLoad(options) {},
  // 生命周期 - 页面展示（不可以访问DOM元素）
  onShow() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onReady() {},
  // 方法集合
  methods: {
    leftClick() {
      uni.navigateTo({
        url: "/packageA/order/index",
      });
    },
    copyText() {
      uni.setClipboardData({
        data: "这是要复制的文本内容",
        success() {
          uni.showToast({
            title: "复制成功",
            icon: "success",
          });
          // uni.hideToast();
        },
      });
    },
  },
};
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.logistics {
  font-family: "Poppins";
  background-color: #f9f9f9;
  position: absolute;
  width: 100%;
  height: 100%;
  .navs {
    padding-top: 140rpx !important;
    display: flex;
    align-items: center;
    margin-left: 5%;
    .sear {
      margin-left: 33%;
    }
  }
  .tabOneitem {
    display: flex;
    height: 200rpx;
    padding: 25rpx 0;
    margin: 20rpx;
    background: white;
    border-radius: 20rpx;

    .tabOneitem_left {
      width: 200rpx;
      height: 200rpx;
      margin-right: 15rpx;
      border-radius: 10rpx;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .tabOneitem_right {
      flex: 1;
      .title {
        font-size: 24rpx;
        color: #4a4543;
        margin-bottom: 5rpx;
        display: flex;
        justify-content: space-between;
        .t2 {
          margin-right: 5%;
          color: #8d8683;
        }
      }
      .item_a {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;

        .img {
          width: 50rpx;
          height: 50rpx;
        }
        .score {
          font-size: 22rpx;
          color: #8d8683;
          margin-top: 10rpx;
          display: inline-block;
          margin-right: 20rpx;
        }
        .comment {
          font-size: 22rpx;
          display: inline-block;
          margin-right: 20rpx;
          color: #8d8683;
        }
        .tickets {
          font-size: 22rpx;
          color: #8d8683;
        }
      }
      .distance {
        display: flex;
        flex-direction: column;
        font-size: 22rpx;
        color: #8d8683;

        .distance1 {
          display: inline-block;
          margin: 10rpx 0;
        }
        .distance2 {
          flex: 1;
        }
      }
    }
  }
  .orders {
    background: #fff;
    width: 90%;
    margin: 20rpx auto;
    border-radius: 10rpx;
    padding: 30rpx;
    .my-od {
      font-size: 30rpx;
      color: #8d8683;
      margin: 10rpx 0;
      .dd {
        margin-right: 5%;
      }
    }
    .kd {
      font-size: 30rpx;
      color: #8d8683;
      display: flex;
      margin: 10rpx 0;
      justify-content: space-between;
      align-items: center;
      .fz {
        display: flex;
        padding: 10rpx;
        .zzz {
          margin-left: 10rpx;
        }
      }
    }
    .my-xr {
      color: #8d8683;
      .cf {
        font-size: 30rpx;
      }
      .blak {
        color: #000;
        margin: 20rpx 0;
        .rg {
          margin: 20rpx 0;
        }
      }
      .yj {
        font-size: 30rpx;
      }
    }
    ::v-deep .u-steps-item__line {
      height: 0 !important;
    }
    ::v-deep .u-steps-item--column {
      padding: 0 !important;
    }
  }
}
</style>